<style scoped>
.doclist .shark {
    padding: 0 30px;
}

.doclist .fast {
    font-size: 20px;
    color: #f39312;
    letter-spacing: 1px;
}

.doclist .main .ivu-select,
.main .ivu-input {
    border-radius: 0 2px 2px 0;
}

.doclist .common-box-body {
    padding-top: 24px;
}
.doclist .fixed-bottom {
    padding-left: 30px;
    padding-right: 40px;
    height: 80px;
    line-height: normal !important;
    position: fixed;
    left: 210px;
    right: 0;
    bottom: 0;
    z-index: 999;
    text-align: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.doclist .sidehide {
    left: 75px;
}
.doclist .detail {
    margin-top: 20px;
    margin-bottom: 15px !important;
}
</style>
<style>
.doclist
    .common-box-body
    .ivu-select-single
    .ivu-select-selection
    .ivu-select-placeholder,
.common-box-body
    .ivu-select-single
    .ivu-select-selection
    .ivu-select-selected-value {
    padding-right: 0px;
}

.doclist .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
    color: #2d8cf0;
    border-color: transparent;
    background-color: #fff;
}

.doclist .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
    color: #808080;
    border: 1px solid #dddee1;
    border-bottom: 0;
}
.doclist button.ivu-btn {
    border-radius: 2px !important;
}
</style>


<template>
    <div class="doclist">
        <product-title></product-title>
        <div class="shark" style="padding:0 30px;">
            <div class="fast">快速搜索</div>
            <div class="common-box-body">
                <Form>
                    <Row>
                        <Col :md="24" :lg="4">
                        <FormItem>
                            <Input placeholder="请输入工号" v-model="formdata.job_code"></Input>
                        </FormItem>
                        </Col>

                        <Col :md="24" :lg="4">
                        <FormItem>
                            <Select clearable filterable placeholder="请输入分支机构" v-model="formdata.yun_org_mid" :transfer=true>
                                <Option value="">全部</Option>
                                <Option v-for="item in orglist" :value="item.id" :key="item.id">{{item.shortn}}</Option>
                            </Select>
                        </FormItem>
                        </Col>

                        <Col :md="24" :lg="4">
                        <FormItem>
                            <Input placeholder="请输入姓名" v-model="formdata.name"></Input>
                        </FormItem>
                        </Col>

                        <Col :md="24" :lg="4">
                        <FormItem>
                            <DatePicker type="month" placeholder="请选择年月" v-model="date" @on-change="datachange($event,formdata,'date')"></DatePicker>
                        </FormItem>
                        </Col>

                        <Col :md="24" :lg="{span:4,offset:4}">
                        <Button size="large" class="fr" type="primary" icon="ios-search" @click="search">搜索</Button>
                        </Col>
                    </Row>
                    <div style="border-bottom:1px solid #BEBEBE;"></div>
                    <Row style="margin-top:20px;">
                        <Col span="24" class="table-action">
                        <div class="fr">
                            <Upload action="" :format="['xlsx']" name="file_input" :before-upload="handleUploadWl">
                                <Button type="info" size="large" class="fr" icon="icon iconfont icon-daoru">导入薪资调整明细文件</Button>
                            </Upload>
                        </div>
                        <div style="border-right: 1px solid #EDF2F6;padding-right:15px;" class="fr">
                            <a href="https://test.kuaibao365.com/batch_export/download_employee_demo?service_type=4">
                                <Button type="info" size="large" class="fr" icon="icon iconfont icon-daochu">薪资调整明细模板下载</Button>
                            </a>
                        </div>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns1" :data="tableList" class=""></Table>
                    </div>
                </div>
            </div>
            <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="12">
                        <Button type="error" :disabled="tableaction" size="large" class="fl mr10 " @click="remove">删除</Button>
                    </Col>
                    <Col :md="24" :lg="12" class="tRight">
                    <Page :total="totals" ref='pages' :current="currentpage" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                    </Col>
                </Row>
            </div>
        </div>
        <Modal v-model="importModal" width="1300" :closable="false" :mask-closable="false">
            <p slot="header" style="color:#fff;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>数据导入展示</span>
            </p>
            <div style="text-align:center">
                <p>{{statustxt}}</p>
                <div>
                    <Row>
                        <Col>
                        <div class="">
                            <Table size="large" stripe border :columns="columns2" :data="policy_list" class="">
                            </Table>
                        </div>
                        </Col>
                    </Row>
                    <div :md="24" :lg="8" class="tRight mod_table">
                        <Page ref="pages2" :total="listTotal2" :page-size="pagesize2" @on-change="pageChange2" placement="top" class="page"></Page>
                    </div>
                </div>
            </div>
            <div class="err_msg" style="color:red">
                <span>{{err_msg}}</span>
                <span style="color:blue;">{{err_msg2}}</span>
                <span>{{err_msg3}}</span>
            </div>
            <div slot="footer" :md="24" :lg="8">
                <Button style="width:60px;" type="primary" size="small" @click="quxiao">取消导入</Button>
                <Button style="width:60px;" offset="20" class="tRight" v-if="modShow" type="success" size="small" long @click="uploadbBtnWl">确定导入</Button>
            </div>
        </Modal>

    </div>
</template>

<script>
import productTitle from "../../components/productTitle";
import { getListByName } from "../../api/yun_org";
import {
    import_cut_pay,
    import_cut_pay2,
    add_cut_pay,
    cut_pay_list,del_cut_pay
} from "../../api/hot_deductions.js";

export default {
    data() {
        return {
            tableaction:true,
            modShow: false,
            importModal: false,
            statustxt: "数据导入中",
            orglist: [], //机构
            tableList: [],
            p: 1, //对页面页数的定义-->初始化
            pagesize: 10, //对页面的定义,出事定义10条数据
            totals: 0,
            currentpage: 1,
            date: "",
            formdata: {
                p: 1, //对页面页数的定义-->初始化
                pagesize: 10, //对页面的定义,出事定义10条数据
                yun_org_mid: "",
                name: "",
                job_code: "",
                date: ""
            },
            columns1: [
                {
                    title: "机构",
                    key: "oname",
                    align: "center"
                },
                {
                    title: "工号",
                    key: "job_code",
                    align: "center"
                },
                {
                    title: "姓名",
                    key: "name",
                    align: "center"
                },
                {
                    title: "佣金年月",
                    key: "date",
                    align: "center"
                },
                {
                    title: "项目",
                    key: "project_name",
                    align: "center"
                },
                {
                    title: "金额",
                    key: "value",
                    align: "center"
                }
            ],
            columns2: [
                {
                    title: "机构",
                    key: "oname",
                    align: "center"
                },
                {
                    title: "工号",
                    key: "job_code",
                    align: "center"
                },
                {
                    title: "姓名",
                    key: "name",
                    align: "center"
                },
                {
                    title: "佣金年月",
                    key: "date",
                    align: "center"
                },
                {
                    title: "项目",
                    key: "project_name",
                    align: "center"
                },
                {
                    title: "金额",
                    key: "value",
                    align: "center"
                },
                {
                    title: "信息提示",
                    key: "err",
                    align: "center",
                    render: (h, params) => {
                        return h(
                            "div",
                            {
                                style: {
                                    color: "red",
                                    fontSize: "12px"
                                }
                            },
                            params.row.err
                        );
                    }
                }
            ],
            policy_list: [],
            page2: 1,
            pagesize2: 10,
            listTotal2: 0,
            err_msg: "",
            err_msg2: "",
            err_msg3: "",
            getData: {},
            current:{},
        };
    },
    components: {
        productTitle
    },
    computed: {
        slidetoggle() {
            return this.$store.state.sildeshow;
        }
    },
    mounted() {
        this.orglistinit();
        this.getList();
    },
    methods: {
        // 点击删除执行删除选中的table操作
            remove() {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        var _param = {
                            id:this.current.id
                        }
                        new Promise((resolve, reject) => {
                            del_cut_pay(_param).then(response => {
                                if(response.data.err == 0){
                                     this.$Message.success(response.data.msg);
                                     this.tableaction = true;
                                     this.getList();
                                }else {
                                    this.$Message.error(response.data.info);
                                }                        
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    },
                    
                });
            },
        // 选中表单的其中一项,进行数据删除处理
            //选中当前行数据
            tableCurrentChange(currentRow,oldCurrentRow){
                    this.tableaction = false;
                    this.current = currentRow;
                    console.log(this.current,"...this.current")
            },
        orglistinit() {
            new Promise((resolve, reject) => {
                let _params = {
                    name: ""
                };
                getListByName(_params)
                    .then(response => {
                        if (response.data.err == 0) {
                            this.orglist = response.data.data;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },
        //时间转换
        datachange(date, obj, param) {
            obj[param] = date;
        },
        // WL
        quxiao() {
            this.importModal = false;
            this.policy_list = [];
            this.getData.p = 1;
            this.getData.uniqid = "";
            this.listTotal2 = 0;
            this.page2 = 1;
            this.$refs["pages2"].currentPage = 1;
            this.modShow = false;
            this.tableaction = true;
        },
        // 导入员工数据
        //上传之前
        handleUploadWl(file) {
            this.importModal = true;
            this.tableaction = true;
            new Promise((resolve, reject) => {
                let param = new FormData();
                param.append("file", file);
                console.log(file);
                import_cut_pay(param)
                    .then(response => {
                        if (response.data.err == 0) {
                            this.policy_list = response.data.list;
                            this.listTotal2 = response.data.total;
                            if (this.listTotal2 < 10) {
                                this.modShow = true;
                            }
                            this.getData.uniqid = response.data.uniqid;
                            this.importModal = true;
                        } else {
                            this.$Message.error("上传失败！");
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
            return false;
        },
        // 点击modal  确定导入
        // 打开弹窗
        uploadbBtnWl() {
            this.tableaction = true;
            this.sendDatawl();
            this.$refs["pages2"].currentPage = 1;
            this.modShow = false;
        },
        sendDatawl() {
            new Promise((resolve, reject) => {
                let _params = {
                    uniqid: this.getData.uniqid
                };
                add_cut_pay(_params)
                    .then(response => {
                        if (response.data.err == 0) {
                            this.importModal = false;
                            this.$Message.success("导入成功");
                            this.getList();
                        } else {
                            this.$Message.error(response.data.msg);
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },

        get_file_list() {
            new Promise((resolve, reject) => {
                console.log(this.getData, "////");
                import_cut_pay2(this.getData)
                    .then(response => {
                        if (response.data.err == 0) {
                            this.policy_list = response.data.list;
                            this.listTotal2 = response.data.total;
                        } else {
                            this.$Message.error("上传失败！");
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },
        // 页码改变
        pageChange2(page) {
            var clie = Math.ceil(this.listTotal2 / 10);
            if (page != clie) {
                this.modShow = false;
            } else {
                this.modShow = true;
            }
            this.page2 = page;
            this.getData.p = this.page2;
            console.log(this.getData.uniqid, "xxx", this.getData);
            this.get_file_list();
        },
        //获取页面信息getList
        getList() {
            new Promise((resolve, reject) => {
                cut_pay_list(this.formdata)
                    .then(response => {
                        if (response.data.err == 0) {
                            this.tableList = response.data.list;
                            this.totals = response.data.total;
                        } else {
                            this.$Message.error(response.data.msg);
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },
        // 页码改变
        pageChange(p) {
            this.p = p;
            this.formdata.p = p;
             this.tableaction = true;
            this.getList();
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize;
            this.formdata.pagesize = pagesize;
            this.getList();
        },
        /**@augments
         *
         */
        // 点击搜索,进行数据搜索
        search() {
            this.p = 1;
            this.formdata.p = 1;
            this.getList();
             this.$refs['pages'].currentPage=1
        }
    }
};
</script>